/*
 * @Author: xiaoyan
 * @Date: 2021-11-19 10:04:05
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-12-06 14:22:12
 * @Description: login
 * @FilePath: \user_auth_front\src\pages\login\index.tsx
 */
import "./index.scss"
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { setToken as storageToken} from '@/utils/storage'
import { setToken } from "@/store/modules/user"
import { useDispatch } from 'redux-react-hook';
import { login } from "@/api";
export default ()=>{
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const onFinish = (data:Object)=>{
        login(data).then((res:any)=>{
            if(res.code === 0){
                const token = res.data;
                storageToken(token);
                const action = setToken(token);
                dispatch(action);
                navigate('/home');
            }else{
                message.error(res.msg);
            }
        });
    };
    const onFinishFailed = ()=>{
        
    };
    return (
        <div className="login-container">
            <div className="name">用户管理平台</div>
            <div className="login-area">
                <div className="title">用户登录</div>
                <Form
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item name="username" rules={[{required:true,message:"请输入用户名"}]}>
                        <Input prefix={<UserOutlined />} placeholder="请输入用户名" allowClear />
                    </Form.Item>
                    <Form.Item name="password" rules={[{required:true,message:"请输入密码"}]}>
                        <Input type="password" prefix={<LockOutlined />} placeholder="请输入密码" allowClear/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">登录</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};